<template>
    <div class="page_content">
        <div style="display: flex;justify-content:center;align-items: center;height: 200rem;" v-show="isLoading">
            <a-spin size="large" :spinning="isLoading"></a-spin>
        </div>
        <div class="data-content w-fixed-center" v-if="!isLoading">
            <div class="p_title_before pc">个人</div>
            <div class="detail pl15">
                <img class="avatar" :src="imgDomainUrl + apiData.my.avatar">
                <span class="name ccyc1">{{ apiData.my.nickname }}</span>
                <span class="setInfo">设置头像和昵称</span>
            </div>
            <div class="donation pl15" v-if="apiData.donation">
                <div class="title">捐助记录</div>
                <div class="list">
                    <div class="box" v-for="donation_item in apiData.donation" :key="donation_item.id"
                        :style="`background-image: url(${imgDomainUrl + donation_item.donation.img});`"
                        @click="donationOrderList(donation_item.donation.id)">
                        <div class="bg_color bg_color_fixed"></div>
                        <div class="bg_color bg_color_jianbian"></div>
                        <div class="info">
                            <div class="title ccyc1">{{ donation_item.donation.title }}</div>
                            <div class="ji_gou shoukuan ccyc1">收款机构：{{ donation_item.donation.organization_collection }}
                            </div>
                            <div class="ji_gou zhixing ccyc1">执行机构：{{ donation_item.donation.organization_execute }}
                            </div>
                            <div class="ji_gou love ccyc1">
                                共捐款<span class="love_detail love_money">{{ donation_item.donation_amount
                                    }}</span>元，爱心行动<span class="love_detail love_num">{{ donation_item.donation_times
                                    }}</span>次
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="do_redirect">
                <div class="service_agreement fwxy" @click="showUserAgreement('user_agreement', '皓缘慈善基金公益服务协议')">
                    <span class="title ccyc1">皓缘慈善基金公益服务协议</span>
                    <span class="jiantou">
                        <img src="@/assets/img/to_right_jiantou.png" />
                    </span>
                </div>
                <div class="service_agreement yszc" @click="showUserAgreement('privacy_policy', '皓缘慈善基金公益隐私协议')">
                    <span class="title ccyc1">皓缘慈善基金公益隐私协议</span>
                    <span class="jiantou">
                        <img src="@/assets/img/to_right_jiantou.png" />
                    </span>
                </div>
                <div class="service_agreement chgpwd">
                    <span class="title ccyc1">修改密码</span>
                    <span class="jiantou">
                        <img src="@/assets/img/to_right_jiantou.png" />
                    </span>
                </div>
                <div class="service_agreement logout" @click="webLogout()">
                    <span class="title ccyc1">退出登录</span>
                    <span class="jiantou">
                        <img src="@/assets/img/to_right_jiantou.png" />
                    </span>
                </div>
            </div>
        </div>

        <!-- 弹窗显示用户协议、隐私协议 -->
        <modalCommonSetEditor v-bind="modalCommonSetEditorProps" v-model:isOpen="modalCommonSetEditorIsShow" v-if="modalCommonSetEditorIsShow" />

        <!-- 弹窗显示用户捐赠记录 -->
        <modalCommon v-bind="modalCommonProps" v-model:isOpen="modalCommonIsShow" v-if="modalCommonIsShow" />

    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, onMounted, inject } from 'vue';   //引入ref
import { getMyData } from "@/api/web";   //引入api
//设置导航选中状态
import { webNavSelected } from '@/store/webNavSelected.js';
webNavSelected.set('my');

import { useRoute, useRouter } from 'vue-router';
const router = useRouter();

const isLoading = ref(true);    // 控制loading

const { imgDomainUrl } = inject('imgDomainUrl');  // 依赖注入--文件、图片前的域名
const { webLogout } = inject('webLogout');  // 依赖注入--退出登录

const apiData = ref({}); // 接口获取到的数据
// 获取数据
const getData = () => {
    isLoading.value = true;
    const searchData = ref({});
    //根据需求可以通过data传入参数
    getMyData(searchData.value).then((res) => {
        isLoading.value = false;
        if (res === false) return;

        apiData.value = res.data;
    }).catch((rej) => {
        isLoading.value = false;
        message.error('错误：' + rej);
    });
}

// 捐助记录列表
import modalCommon from '@/components/web/page/modal_common.vue';   //引入公用弹窗组件
const modalCommonIsShow = ref(false);
const modalCommonProps = ref({ type: 'my_order_list', title: '捐赠记录', paramsInt: 0 }); // 公用弹窗组件参数
const donationOrderList = (donationId) => {
    modalCommonIsShow.value = true;
    modalCommonProps.value.paramsInt = donationId;
}

// 以下是用户协议、隐私协议的弹窗iframe相关
import modalCommonSetEditor from '@/components/web/page/modal_common_set_editor.vue';   //引入显示用户协议、隐私协议的弹窗组件
const modalCommonSetEditorIsShow = ref(false);
const modalCommonSetEditorProps = ref({ type: '', title: '' }); // 弹窗iframe参数
const showUserAgreement = (type, title) => {
    modalCommonSetEditorIsShow.value = true;
    modalCommonSetEditorProps.value.type = type;
    modalCommonSetEditorProps.value.title = ''; //用户协议、隐私协议的标题，已经包含在内容里了，不需要传参
}
// 以上是用户协议、隐私协议的弹窗iframe相关

// 进入页面执行一次
onMounted(() => {
    getData();
});
</script>
<style scoped>
.page_content {
    background: #F5F5F5;
    padding: 30rem 0;
}

.data-content {
    width: 1400rem;
    padding: 30rem 35rem 71rem 30rem;
    background-color: #ffffff;
}

.pl15 {
    padding-left: 15rem;
}

.p_title_before {
    height: 45rem;
    line-height: 45rem;
    font-size: 36rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rem;
    border-left-width: 5rem;
}

.detail {
    margin-top: 36rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.detail>.avatar {
    width: 60rem;
    height: 60rem;
    border-radius: 50%;
}

.detail>.name {
    margin-left: 20rem;
    height: 22rem;
    line-height: 22rem;
    font-weight: 500;
    font-size: 16rem;
    color: #333333;
}

.detail>.setInfo {
    margin-left: 30rem;
    height: 22rem;
    line-height: 22rem;
    font-weight: 400;
    font-size: 16rem;
    color: #999999;
}

.donation {
    margin-top: 69rem;
}

.donation>.title {
    height: 33rem;
    line-height: 33rem;
    font-size: 24rem;
    font-weight: 600;
    color: #333333;
}

.donation>.list {
    margin-top: 20rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.donation>.list>.box {
    width: 420rem;
    height: 160rem;
    margin-right: 30rem;
    border-radius: 8rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    position: relative;
    cursor: pointer;
}

.donation>.list>.box:nth-child(3n) {
    margin-right: 0;
}

.donation>.list>.box>.bg_color {
    width: 50%;
    height: 100%;
}

.donation>.list>.box>.bg_color_fixed {
    background-color: #A5251F;
}

.donation>.list>.box>.bg_color_jianbian {
    background: linear-gradient(90deg, #A5251F 0%, rgba(165, 37, 31, 0) 100%);
}

.donation>.list>.box>.info {
    position: absolute;
    top: 23rem;
    left: 20rem;
    right: 20rem;
    color: #ffffff;
}

.donation>.list>.box>.info>.title {
    height: 25rem;
    line-height: 25rem;
    font-weight: 500;
    font-size: 18rem;
    margin-bottom: 18rem
}

.donation>.list>.box>.info>.ji_gou {
    margin-bottom: 10rem;
    height: 17rem;
    line-height: 17rem;
    font-weight: 400;
    font-size: 12rem;
}

.donation>.list>.box>.info>.love>.love_detail {
    margin-left: 5rem;
    height: 17rem;
    line-height: 17rem;
    font-weight: 400;
    font-size: 12rem;
}

.do_redirect {
    padding-top: 17rem;
    padding-left: 15rem;
}

.service_agreement {
    margin-top: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25rem;
    line-height: 25rem;
    padding-left: 10rem;
    font-weight: 400;
    font-size: 18rem;
    color: #333333;
    cursor: pointer;
}

.service_agreement>.title {
    max-width: 80%;
    font-weight: 400;
    font-size: 14rem;
    color: #333333;
}

.service_agreement>.jiantou>img {
    width: 12rem;
    height: 12rem;
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    .w-fixed-center {
        width: 340rem;
    }

    .pl15 {
        padding-left: 0;
    }

    .page_content {
        background-color: #ffffff;
        padding: 0;
    }

    .data-content {
        padding: 0;
    }

    .detail {
        margin-top: 20rem;
        position: relative;
    }

    .detail>.avatar {
        width: 40rem;
        height: 40rem;
    }

    .detail>.name {
        margin-left: 10rem;
        height: 20rem;
        line-height: 20rem;
        font-size: 14rem;
    }

    .detail>.setInfo {
        height: 17rem;
        line-height: 17rem;
        font-size: 12rem;
        position: absolute;
        right: 0;
    }

    .donation {
        margin-top: 24rem;
    }

    .donation>.title {
        height: 22rem;
        line-height: 22rem;
        font-size: 16rem;
    }

    .donation>.list {
        margin-top: 10rem;
    }

    .donation>.list>.box {
        width: 340rem;
        height: 114rem;
        margin-right: 0;
        margin-bottom: 10rem;
    }

    .donation>.list>.box:last-child {
        margin-bottom: 0;
    }

    .donation>.list>.box>.info {
        top: 12rem;
        left: 16rem;
        right: 16rem;
    }

    .donation>.list>.box>.info>.title {
        font-size: 14rem;
        height: 20rem;
        line-height: 20rem;
        margin-bottom: 10rem;
    }

    .donation>.list>.box>.info>.ji_gou {
        height: 17rem;
        line-height: 17rem;
        font-size: 12rem;
        margin-bottom: 3rem;
    }

    .donation>.list>.box>.info>.zhixing {
        margin-bottom: 5rem;
    }

    .donation>.list>.box>.info>.love {
        font-weight: 400;
    }

    .do_redirect {
        padding-left: 10rem;
        padding-top: 6rem;
    }

    .service_agreement {
        margin-top: 12rem;
        padding-left: 0;
        height: 20rem;
        line-height: 20rem;
        font-size: 14rem;
    }
}
</style>